import { useState } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { Layout, Menu, Breadcrumb } from "antd";
import {
  OrderedListOutlined,
  UnorderedListOutlined,
  ScheduleOutlined,
  QuestionOutlined,
} from "@ant-design/icons";

const TaskCenter = () => {
  const [taskType, setTaskType] = useState("每日任务");

  const navigate = useNavigate();
  const { Content, Sider } = Layout;

  const toggleWork = (item: any) => {
    let path = "daily-work";
    switch (item.key) {
      case "daily":
        setTaskType("每日任务");
        break;
      case "weekly":
        setTaskType("每周任务");
        path = "weekly-work";
        break;
      case "calender":
        setTaskType("任务日历");
        path = "calender-work";
        break;
      case "test":
        setTaskType("test");
        path = "test";
        break;
    }

    navigate(`/home/task-center/${path}`);
  };

  return (
    <>
      <Sider width={200} className="site-layout-background">
        <Menu
          mode="inline"
          defaultSelectedKeys={["daily"]}
          style={{ height: "100%", borderRight: 0 }}
          onClick={toggleWork}
        >
          <Menu.Item key="daily" icon={<OrderedListOutlined />}>
            每日任务
          </Menu.Item>
          <Menu.Item key="weekly" icon={<UnorderedListOutlined />}>
            每周任务
          </Menu.Item>
          <Menu.Item key="calender" icon={<ScheduleOutlined />}>
            任务日历
          </Menu.Item>
          <Menu.Item key="test" icon={<QuestionOutlined />}>
            测试 redux
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout style={{ padding: "0 24px 24px" }}>
        <Breadcrumb style={{ margin: "16px 0" }}>
          <Breadcrumb.Item>主页</Breadcrumb.Item>
          <Breadcrumb.Item>任务中心</Breadcrumb.Item>
          <Breadcrumb.Item>{taskType}</Breadcrumb.Item>
        </Breadcrumb>
        <Content className="site-layout-background">
          <Outlet />
        </Content>
      </Layout>
    </>
  );
};

export { TaskCenter };
